const path = require("path");
const webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { VueLoaderPlugin } = require("vue-loader");

const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
    mode: "development",
    entry: {

        //折线图
        // gridCom5: './src/components/gridCom5.vue',
        TopTitle: './src/components/elements/TopTitle.vue',
        HallSituaction: './src/components/elements/HallSituaction.vue',
        HallRole: './src/components/elements/HallRole.vue',
        HallPj: './src/components/elements/HallPj.vue',
        HallOnline: './src/components/elements/HallOnline.vue',
        HallTask: './src/components/elements/HallTask.vue',
        CarouselCircle: './src/components/elements/CarouselCircle.vue',
        //折线图
        // BrokenLineTEST250122:'./src/components/BrokenLineTest.vue',
        // 饼图
        // PieCharts2:'./src/components/PieCharts2.vue',

    }, // 项目的入口文件，webpack会从main.js开始，把所有依赖的js都加载打包
    output: {
        path: path.resolve(__dirname, "./"), // 项目的打包文件路径
        publicPath: "",
        filename: "./components/grids/[name]/[name].js", // 打包后的文件名
        libraryExport: "default",
        libraryTarget: "umd",
        library: "[name]",
        umdNamedDefine: true,
    },

    resolve: {
        alias: {
            vue: "vue/dist/vue.min.js",
            "@": path.resolve(__dirname, "./src"),
            "@~": path.resolve(__dirname, "./static"),
        },
    },
    optimization: {
        minimize: true,

    },
    plugins: [
        new VueLoaderPlugin(),
        new webpack.DefinePlugin({
            __VUE_OPTIONS_API__: false,
            __VUE_PROD_DEVTOOLS__: false,
        }),
        //分离抽取css
        new MiniCssExtractPlugin({
            filename: "./components/grids/[name]/[name].css",
            linkType: "text/css",
            insert: function (linkTag) {
                var reference = document.querySelector("#some-element");
                if (reference) {
                    reference.parentNode.insertBefore(linkTag, reference);
                }
            },
        }),
    ],
    // 加载模块
    module: {
        rules: [{
            test: /\.js$/,
            use: ["babel-loader"],
            exclude: /node_modules/,
        },
        {
            //vue文件加载器
            test: /\.vue$/,
            loader: "vue-loader",
        },
        {
            test: /\.(png|svg|jpeg|gif|jpg)/,
            type: "asset/resource",
            generator: {
                filename: (pathData) => {
                    // 获取当前处理模块的名称
                    const moduleName = path.dirname(pathData.module.resource).split(path.sep).pop();
                    // return `components/grids/${moduleName}/images/[name].[hash][ext][query]`;
                    return `components/grids/${moduleName}/[name].[hash][ext][query]`;
                },
            }
        },
        {
            // 匹配所有css文件, 用style和css工具解析
            test: /\.css$/,
            use: [{
                loader: MiniCssExtractPlugin.loader,
                options: {
                    publicPath: "../../../",
                },
            },
                "css-loader",
            ],
        },
        {
            test: /\.s[ac]ss$/i,
            use: [{
                loader: MiniCssExtractPlugin.loader,
                options: {
                    publicPath: "../../../",
                },
            },
                // Translates CSS into CommonJS
                "css-loader",
                // Compiles Sass to CSS
                "sass-loader",
            ],
        },
        {
            //处理字体文件的loader
            test: /\.(OTF|ttf|svg|eot|woff|woff2|TTF)$/,
            use: ["url-loader"],
        },
        ],
    },
};


